<template>
  <view class="ui-checkbox-group" :class="[ui]">
    <slot :is-all-checked="isAllChecked" :is-indeterminate="isIndeterminate"></slot>
  </view>
</template>

<script>
export default {
  name: 'UiCheckboxGroup',
  props: {
    ui: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Array]
    },
    disabled: {
      type: Boolean,
      default: false
    },
    bg: {
      type: String,
      default: 'ui-BG-Main'
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      group: [],
      all: [],
      isAllChecked: false,
      isIndeterminate: false
    }
  },
  watch: {
    value: {
      handler(value) {
        this.all = []
        this.$nextTick(function () {
          this._deepSetValue(this.$children)
        })
        this.group = value
      },
      immediate: true
    },
    group: {
      handler(value) {
        this.$nextTick(function () {
          this.isAllChecked = this.all.length === this.group.length
          this.isIndeterminate = this.group.length > 0
        })
      },
      immediate: true
    }
  },
  methods: {
    _onCheckboxChange(value) {
      const index = this.group.indexOf(value)
      if (index === -1) {
        this.group.push(value)
      }
      else {
        this.group.splice(index, 1)
      }
      this.$emit('input', this.group)
      this.$emit('change', this.group)
    },
    _onCheckboxAll(isAll) {
      if (isAll) {
        this.group = this.all
      }
      else {
        this.group = []
      }
      this.$emit('input', this.group)
      this.$emit('change', this.group)
    },
    _deepSetValue(array) {
      if (Array.isArray(array)) {
        array.forEach((child) => {
          const childName = child.$options.name
          if (childName === 'UiCheckbox') {
            if (!child.all) {
              this.all.push(child.value)
            }
            if (typeof child._setValue === 'function') {
              child._setValue(this.value)
            }
          }
          else if (child.$children) {
            this._deepSetValue(child.$children)
          }
        })
      }
    }
  }
}
</script>

<style></style>
